<template>
  <div class="order_history">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('历史订单')}}</div>
      </div>
    </div>

    <div class="wrapper" >
      <template v-if="loanOrderList.length !== 0">
        <div class="card_box"  v-for="item in loanOrderList" :key="item.loanRecordId"
        >
          <div class="card_header">
            <span>
              <img :src="item.productLogo" class="product_logo">
            <span style="font-size: 20px;vertical-align: middle">{{ item.appName }}</span>
            </span>
            <div class="details" v-if="item.approvalResult === 9"  @click="handleClick(item)">
              <span>{{ $t('详情') }}</span>
              <van-icon style="vertical-align: middle" name="arrow"/>
            </div>
            <span v-else style="color: #FE1010;font-size: 18px">Audit failure</span>
          </div>
          <div class="card_body">
            <div style="margin-bottom:15px">
              <span style="color:#666666">{{ $t('借款金额') }}</span>
              <span style="float:right;color: #FFC74C;"><span>₱</span>{{ item.loanAmount }}</span>
            </div>
            <div>
              <span style="color:#666666">{{ $t('借款时间') }}</span>
              <span style="float:right">{{ $dateFormat(new Date(item.loanTime),'dd/mm/YYYY HH:MM:SS')  }}</span>
            </div>
          </div>
        </div>
      </template>
     <template v-else>
       <div class="no_content" >
         <img class="image" src="../../../assets/my/is_null.png">
       </div>
     </template>
    </div>
  </div>
</template>

<script>
import {computed, onMounted, ref} from 'vue'
import router from "@/router";
import {fetchMyLoanRecord} from '@/api/order'
import {useStore} from "vuex";
import {formatMoney} from "@/utils/tool";

export default {
  setup() {
    const loanOrderList = ref([])
    const store = useStore()
    //(-1订单关闭,0,待审核1,审核中,2,拒绝,5,待放款,6待还款,8,逾期,9结清)
    const fetchLoanOrder = async () => {
      const res = await fetchMyLoanRecord({type: 1})
      if (res.code === 1) {
        loanOrderList.value = res.data
      }
      store.dispatch('changeLoading', false)
    }
    const handleClick = async ({loanRecordId}) => {
      router.push({
        path: '/tSjFyfeSgda',
        query: {
          loanRecordId: loanRecordId
        }
      })
    }
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value)
      } else {
        return value
      }
    }
    onMounted(() => {
      fetchLoanOrder()
    })
    return {
      handleClick,
      loanOrderList,
      formatterMoney
    }
  }
}
</script>

<style lang="less" scoped>
.order_history {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  .wrapper {
    width: 100%;
    margin-top: -150px;
    padding: 15px;
    box-sizing: border-box;
  background-color: #F7F7F7;
    border-radius: 10px;
    .card_box {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      background-color: #FFFFFF;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      .card_header {
        padding: 15px;
        position: relative;
        font-size: 22px;
        border-bottom: 1px solid #E1E1E1;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px 10px 0 0;
        overflow: hidden ;
        background-image: url("../../../assets/order/order_header_pane.png");
        background-size: 100% 100%;

        .product_logo {
          height: 36px;
          width: 36px;
          vertical-align: middle;
          margin-right: 10px;
          border-radius: 50%;
        }

        .details {
          font-weight: 400;
          font-size: 16px;
          vertical-align: middle;
        }
      }

      .card_body {
        overflow: hidden;
        font-size: 14px;
        padding: 15px;
        border-radius: 0 0 10px 10px;
        background-color: #F3FCFF;
        position: relative;
        .product_info {
          margin-bottom: 20px;

          .logo {
            height: 26px;
            width: 26px;
            margin-right: 5px;
            vertical-align: middle;
          }
        }
      }
    }
  }


}


</style>
